<!--  -->
<template>
  <div class='configDetail'>
    <div class='configDetail_cityName'>
        城市：{{$route.query.title}}
    </div>
    <div class="configDetail_openplatform">
       <h3 class="configDetail_openplatform_h3">开放平台：</h3>
       <Checkbox @on-change="checkboxChange('bappStatus')" class="configDetail_openplatform_span" v-model="formValidate.bappStatus">B-APP</Checkbox>
       <Checkbox @on-change="checkboxChange('cappStatus')" class="configDetail_openplatform_span" v-model="formValidate.cappStatus">C-APP</Checkbox>
       <Checkbox @on-change="checkboxChange('pcStatus')" class="configDetail_openplatform_span" v-model="formValidate.pcStatus">C-PC</Checkbox>
       <Checkbox @on-change="checkboxChange('mstationStatus')" class="configDetail_openplatform_span" v-model="formValidate.mstationStatus">C-M站</Checkbox>
       <Checkbox @on-change="checkboxChange('wechatStatus')" class="configDetail_openplatform_span" v-model="formValidate.wechatStatus">C-小程序</Checkbox>
    </div>
    <Tabs :animated="false" @on-click="tableClick" :value="currentTab" type="card">
        <TabPane name="area" label="区域"><cityConfig-area v-if="currentTab == 'area'"  /></TabPane>
        <TabPane name="traffic" label="交通"><cityConfig-traffic v-if="currentTab == 'traffic'"  /></TabPane>
        <TabPane name="screen" label="筛选"><cityConfig-screen  v-if="currentTab == 'screen'" /></TabPane>
        <TabPane name="label" label="后台标签"><cityConfig-label v-if="currentTab == 'label'"  /></TabPane>
    </Tabs>
  </div>
</template>

<script>
import cityConfigArea from "@/components/cityConfiguration/cityConfig_area"
import cityConfigLabel from "@/components/cityConfiguration/cityConfig_label"
import cityConfigScreen from "@/components/cityConfiguration/cityConfig_screen"
import cityConfigTraffic from "@/components/cityConfiguration/cityConfig_traffic"
import {getOnlineCityUpdate} from "@/api/cityConfig"
export default {
components: {
    cityConfigArea, 
    cityConfigLabel, 
    cityConfigScreen,
    cityConfigTraffic
},
data() {
return {
 formValidate:{},
 currentTab:'area'
};
},
computed: {},
watch: {},
methods: {
  checkboxChange(type){
    console.log(this.formValidate)
    let params = {
     onlineCityId:this.$route.query.onlineCityId
    };
    params[type] = this.formValidate[type]?1:2;
    getOnlineCityUpdate(params).then(res=>{
      this.$Message.success("修改成功")
    })
  },
  tableClick(e){
    this.currentTab = e;
  }
},
created() {
  let arr = ['bappStatus','cappStatus','pcStatus','mstationStatus','wechatStatus'];
  let status = this.$route.query.status+"";
  status && (status = status.split("~"));
  Array.isArray(status) && status.forEach(item=>this.formValidate[arr[item-0]] = true)
},
mounted() {

},
}
</script>
<style lang='scss' scoped>
 .configDetail{
   padding: 20px;
   &_cityName{
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 20px;  
   }
   &_openplatform{
      &_h3{
        display: inline-block;
        margin-bottom: 20px;
      }
      &_span{
        margin-left: 20px;
      }
   } 
 }
 
</style>